
@font-face {
    font-family: "socialshare";
    src: url('../fonts/share/iconfont.eot'); /* IE9*/
    src: url('../fonts/share/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/share/iconfont.woff') format('woff'), /* chrome, firefox */
        url('../fonts/share/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('../fonts/share/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

.social-share {
    position:relative;
    margin-bottom: -48px;
    display: block;
    align-items: center;
    font-family: "socialshare" !important;
    font-size: 1rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    @include media-breakpoint-down(sm) {
        margin-bottom: -40px;
    }
    
    .icon-tencent:before {
         content: "\f07a"; 
    }

    .icon-qq:before {
         content: "\f11a"; 
    }

    .icon-weibo:before {
         content: "\f12a"; 
    }

    .icon-wechat:before {
         content: "\f09a"; 
    }

    .icon-douban:before {
         content: "\f10a"; 
    }

    .icon-heart:before {
         content: "\f20a"; 
    }

    .icon-like:before {
         content: "\f00a"; 
    }

    .icon-qzone:before {
         content: "\f08a"; 
    }

    .icon-linkedin:before {
         content: "\f01a"; 
    }

    .icon-diandian:before {
         content: "\f05a"; 
    }

    .icon-facebook:before {
         content: "\f03a"; 
    }

    .icon-google:before {
         content: "\f04a"; 
    }

    .icon-twitter:before {
         content: "\f06a"; 
    }

    // 动画
    &.is-actived {
        a {
            visibility: visible;
        }

        a:first-child {
            bottom: 288px;
            @include media-breakpoint-down(sm) {
                bottom: 280px;
            }
        }

        a:nth-child(2) {
            bottom: 232px;
            @include media-breakpoint-down(sm) {
                bottom: 224px;
            }
        }

        a:nth-child(3) {
            bottom: 176px;
            @include media-breakpoint-down(sm) {
                bottom: 168px;
            }
        }

        a:nth-child(4) {
            bottom: 120px; // + 56
            @include media-breakpoint-down(sm) {
                bottom: 112px; // + 56
            }
        }

        a:last-child {
            bottom: 64px; // 48 + 16
            @include media-breakpoint-down(sm) {
                bottom: 56px; // 40 + 16
            }
        }
    }

    a {
        visibility: hidden;
        position: absolute;
        bottom: 4px;
        right: 4px;
        text-decoration:none;
        display:inline-block;
        outline: none;
        background-color: $white;
        z-index: 8000;
        @include media-breakpoint-down(sm) {
            bottom: 0;
            right: 0;
        }
    }

    .social-share-icon {
        position: absolute;
        display:inline-block;
        width: 40px;
        height: 40px;
        font-size: 24px;
        border-radius: 50%;
        line-height: 40px;
        border: 1px solid $gray-200;
        color: $gray-200;
        text-align: center;
        vertical-align: middle;
        transition: background 0.15s ease-in-out, bottom 0.20s ease-in-out, visibility 0.25s ease-in-out;
  
        &:hover{
            background: $gray-200;
            color: $white;
        }
    }

    .icon-weibo{
        color:#ff763b;
        border-color:#ff763b;
        &:hover{
            background:#ff763b;
        }
    }

    .icon-tencent{
        color:#56b6e7;
        border-color:#56b6e7;
        &:hover{
            background:#56b6e7;
        }
    }

    .icon-qq{
        color:#56b6e7;
        border-color:#56b6e7;
        &:hover{
            background:#56b6e7;
        }
    }

    .icon-qzone{
        color:#FDBE3D;
        border-color:#FDBE3D;
        &:hover{
            background:#FDBE3D;
        }
    }

    .icon-douban{
        color:#33b045;
        border-color:#33b045;
        &:hover{
            background:#33b045;
        }
    }

    .icon-linkedin{
        color:#0077B5;
        border-color:#0077B5;
        &:hover{
            background:#0077B5;
        }
    }

    .icon-facebook {
        color:#44619D;
        border-color:#44619D;
        &:hover{
            background:#44619D;
        }
    }

    .icon-google {
        color:#db4437;
        border-color:#db4437;
        &:hover{
            background:#db4437;
        }
    }

    .icon-twitter {
        color:#55acee;
        border-color:#55acee;
        &:hover{
            background:#55acee;
        }
    }

    .icon-diandian {
        color:#307DCA; 
        border-color:#307DCA;
        &:hover{
            background:#307DCA;
        }
    }

    .icon-wechat{
        color:#7bc549;
        border-color:#7bc549;
        &:hover{
            background:#7bc549;
        }
    }

    .icon-wechat .wechat-qrcode{ 
        display: none;
        position: absolute;
        z-index: 9;
        top: -76px;
        right: 50px;
        width: 200px;
        height: 192px;
        color: $gray-800;
        font-size: 12px;
        text-align: center;
        background-color:#fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .14);
        transition:all 200ms;
        -webkit-tansition:all 350ms;
        -moz-transition:all 350ms; 
    }

    .icon-wechat .wechat-qrcode.bottom {
        top:40px;
        left:-84px;
        &:after {
            display:none;
        }
    }

    .icon-wechat .wechat-qrcode h4{
        font-weight:normal;
        height: 28px;
        line-height: 28px;
        font-size: 12px; 
        background-color: $gray-200;
        margin: 0;
        padding: 0;
        color: $gray-800;
    }

    .icon-wechat .wechat-qrcode .qrcode{
        width: 105px; 
        margin: 10px auto;
    }

    .icon-wechat .wechat-qrcode .qrcode table{
        margin:0!important;
    }

    .icon-wechat .wechat-qrcode .help p{
        font-weight: normal;
        line-height: 16px;
        padding: 0;
        margin: 0;
    }

    .icon-wechat .wechat-qrcode:after{
        content:"";
        position:absolute;
        right: -13px;
        margin-bottom: -6px;
        bottom: 50%;
        width: 0;
        height: 0;
        border-width: 6px 6px 6px 8px;
        border-style:solid;
        border-color: transparent transparent transparent #fff;
    }

    .icon-wechat:hover .wechat-qrcode{
        display: block;
    }
}
